<template>
	<div class="list" ref="wrapper">

		<div>

			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button">{{this.city}}</div>
					</div>	
				</div>
			</div>

			<div class="area">
				<div class="title border-topbottom">热门城市</div>
					<div class="button-list">
						<div 
						class="button-wrapper" 
						v-for="(item,index) in hotCities" 
						:key="item.id"
						@click="handleCityClick(item.name)"
						>
							<div class="button">{{item.name}}</div>
						</div>	
					</div>
			</div>

			<div class="area" v-for="(item,key) in cities" :key="key" :ref="key">
				<div class="title border-topbottom">{{key}}</div>
				<div 
				class="item-list" 
				v-for="innerItem in item" 
				:key="innerItem.id" 
				@click="handleCityClick(innerItem.name)"
				>
					<div class="item border-bottom">{{innerItem.name}}</div>
				</div>
			</div>


		</div>

	</div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
	export default{
		props:{
			cities:Object,
			hotCities:Array,
			letter:String
		},
		mounted(){
			this.scroll=new Bscroll(this.$refs.wrapper)
		},
		watch:{
			letter(){
				if(this.letter){
					this.scroll.scrollToElement(this.$refs[this.letter][0])	//api 获得scroll 指定的区域	
				}
			}
		},
		methods:{
			handleCityClick(city){	
				this.changeCity(city )
				this.$router.push("/")
			},
			...mapMutations(['changeCity'])
		},
		computed:{
			...mapState(['city'])
		}
	}	
</script>

<style lang="stylus">
@import "~styles/varibles.styl"
	.border-topbottom
		&:before
			border-color:#ccc
		&:after
			border-color:#ccc
	.border-bottom
		&:before
			border-color:#ccc
		&:after
			border-color:#ccc
	.list
		overflow:hidden
		position:absolute
		top:1.58rem
		left:0
		right:0
		bottom:0
		.title
			line-height:.54rem
			background:#eee
			padding-left:.2rem
			color:#666
			font-size:.26rem
		.button-list
			overflow:hidden
			padding:.1rem .6rem .1rem .1rem
			.button-wrapper
				float:left
				width:33.33%
				.button
					margin:.1rem
					padding:.1rem 0
					text-align:center
					border:.02rem solid #ccc
		.item-list
			.item
				line-height:.76rem
				padding-left:.2rem			
				

</style>